<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>元旦祝福语审核</title>
    <link href="/Public/css/home/style.css" rel="stylesheet">
    <style>
        body{width:100%;background-color:#ffffff}
        input{margin-bottom:15px}
        .login-wrap{max-width:330px;margin:100px auto}
        .sign-title{font-size:24px;color:#6bc5a4;text-align:center;}
        .btn-login{width:100%;display:block;background:#6bc5a4;color:#fff;font-size:30px;margin-top:40px;outline:none;}
        .btn-login:hover{color:#fff}

        .list-wrap{width:100%;position:relative; min-height:1px;padding:5px;}
        .table{width:100%}
        /*.table>thead>tr{width:100%;position:fixed;top:0}*/
        .table>thead>tr>th{text-align: center;}
        .table>tbody>tr>td{vertical-align: middle; text-align: center;}
        .modal-content{background-color:#7a7676}
    </style>
</head>
<body>
<?php use User\Model\ApplicationsModel;?>
<if condition="$mode eq 1">
    <section class="login-wrap">
        <h1 class="sign-title">Sign In</h1>
        <form action="/Wap/Applications/yuandan_check" method="post" onsubmit="return checkLogin();">
            <input type="password" class="form-control" name="password" value="" placeholder="密码">
            <button type="submit" class="btn btn-login"><i class="fa fa-check"></i></button>
        </form>
    </section>
    <script src="/Public/js/jquery-1.11.0.min.js"></script>
    <script>
        function checkLogin(){
            if($("input[name=password]").val() === ""){
                alert("密码不能为空");
                return false;
            }
            return true;
        }
    </script>
<else/>
    <section class="list-wrap">
        <table class="table">
            <thead>
            <tr style="width:100%">
                <th style="width:15%">昵称</th>
                <th style="width:50%">内容</th>
                <th style="width:20%">时间</th>
                <th style="width:15%">操作</th>
            </tr>
            </thead>
            <tbody>
            <volist name="list" id="item">
                <tr id="zhufu{$item.id}">
                    <td>{$fans[$item["openid"]]}</td>
                    <td>
                        <if condition="$item.comment_type eq ApplicationsModel::WISH_TXT">
                            {$item.content}
                        <else/>
                            <a href="javascript:;" onclick="showAudio('{$item[content]}');" class="btn btn-default" title="播放">
                                <i class='fa fa-volume-up'></i> {$item.record_time}'
                            </a>
                        </if>
                    </td>
                    <td>{$item.createdate}</td>
                    <td>
                        <a type="button" href="javascript:;" onclick="return deleteComment({$item['id']});" class="btn btn-default">删除</a>
                    </td>
                </tr>
            </volist>
            </tbody>
        </table>
        <div class="pages">
            {$page}
        </div>
    </section>
    <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="music_player" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <audio id="audio_player" src="" controls="controls" style="width:100%"></audio>
            </div>
        </div>
    </div>
    <script src="/Public/js/jquery-1.11.0.min.js"></script>
    <script src="/Public/js/bootstrap/bootstrap.min.js"></script>
    <script>
        var audio = $("#audio_player")[0];
        $('#music_player').on('show.bs.modal', function () {
            audio.play();
        }).on('hide.bs.modal', function () {
            audio.pause();
        });

        function showAudio(content){
            $("#audio_player").attr("src", content);
            $('#music_player').modal("show");
        }

        function deleteComment(id){
            if(!confirm('确认删除吗？')) return false;
            $.ajax({
                data: {id: id},
                dataType: 'json',
                url: '/Wap/Applications/deleteComment',
                type: 'get',
                success: function (res) {
                    alert(res['info']);
                    $("#zhufu"+id).remove();
                }
            });
            return false;
        }
    </script>
</if>
</body>
</html>